<template>
<view class="container">
    <!-- 搜索栏 -->
    <view class="search-bar">
      <view class="search-input-wrapper">
        <uni-icons type="search" size="18" color="#999" class="search-icon"></uni-icons>
        <input
          v-model="searchKeyword"
          class="search-input"
          placeholder="请输入项目名称"
          placeholder-class="placeholder-style"
          @confirm="handleSearch"
        />
      </view>
    </view>

    <!-- 操作栏 -->
    <view class="action-bar">
      <button class="add-btn" @click="navigateToAdd">
        <uni-icons type="plusempty" size="16" color="#fff"></uni-icons>
        新增项目
      </button>
    </view>

    <!-- 项目列表 -->
    <scroll-view 
      class="scroll-view"
      scroll-y
      @scrolltolower="loadMore"
      :style="{height: scrollHeight + 'px'}"
    >
      <view 
        v-for="item in projectList"
        :key="item.serviceId"
        class="project-item"
        :class="{selected: selectedItems.includes(item.serviceId)}"
        @click="toggleSelect(item.serviceId)"
      >
        <view class="checkbox-wrapper">
          <view class="custom-checkbox">
            <view v-if="selectedItems.includes(item.serviceId)" class="checkbox-icon">
              <uni-icons type="checkmarkempty" size="14" color="#fff"></uni-icons>
            </view>
          </view>
        </view>
        <view class="item-content">
          <view class="title-line">
            <text class="name">{{ item.serviceName }}</text>
            <text class="price">¥{{ item.price }}</text>
          </view>
          <view class="meta-line">
            <text class="category-tag">{{ item.serviceCategory }}</text>
            <text class="desc">{{ item.description }}</text>
          </view>
        </view>
      </view>

      <!-- 加载提示 -->
      <view class="loading-wrapper">
        <view v-if="projectList.length <=  tatal" class="loading-content">
          <uni-icons type="spinner-cycle" size="20" color="#007AFF" class="loading-icon"></uni-icons>
          正在加载...
        </view>
        <view v-else class="no-more">—— 已经到底啦 ——</view>
      </view>
    </scroll-view>

    <!-- 批量操作栏 -->
    <view v-if="selectedItems.length > 0" class="batch-actions">
      <view class="selected-count">
        已选 {{ selectedItems.length }} 项
      </view>
      <view class="action-buttons">
        <button class="btn delete-btn" @click="handleBatchDelete">删除</button>
        <button class="btn create-btn" @click="handlecreate">生成套餐</button>
      </view>
    </view>
	<!-- 生成套餐 -->
	<uni-popup ref="detailPopup" type="center" :mask-click="false">
	  <view class="detail-modal">
	    <view class="modal-header">
	      <text class="modal-title">新建套餐</text>
	      <uni-icons
	          type="close"
	          size="20"
	          color="#999"
	          @click="detailPopup.close()"
	      />
	    </view>
		<!-- 		// 套餐名
		package_name:null,
		// 优惠金额
		discount_amount:null,
		prince:0 -->
	    <scroll-view scroll-y class="modal-content">
	      <text class="detail-name">
          {{ packageInfo?.packageName }}
        </text>
        <view class="price-row">
          <text class="label">套餐名：</text>
          <input
              v-model="packageInfo.packageName"
              class="search-input"
              placeholder="请输入套餐名"
              placeholder-class="placeholder-style"
          />
        </view>
	      <view class="price-row">
	        <text class="label">套餐价格：</text>
          <input
              v-model="packageInfo.prince"
              class="search-input"
              placeholder="请输入套餐价格"
              placeholder-class="placeholder-style"
          />
	      </view>
        <view class="price-row">
	        <text class="label">原始金额：</text>
	        <text class="value red-text">¥{{ selectedAmount }}</text>
	      </view>
        <button @click="subCreate">确认生成</button>
<!-- 	      <view class="price-row">
	        <text class="label">原价：</text>
	        <text class="value del-text">¥{{ packageInfo?.originalPrice }}</text>
	      </view> -->
	      <view class="divider"></view>
		  <!-- 包含项目 -->
	      <!-- <text class="desc">{{ packageInfo?.description }}</text> -->
	    </scroll-view>
	  </view>
	</uni-popup>
  </view>
</template>
<script setup>
	import {ref,reactive,onMounted} from 'vue';
	import {getlist,deleteBatch} from '@/api/mcslf/service'
	import {add} from '@/api/mcslf/PackageController.js'
	import {redirectRefresh} from '@/utils/mcslf.js'
	// 响应式数据
	const projectList = ref([]);
	const selectedItems = ref([]);
	const searchKeyword = ref('');
	const page = ref(1);
	const pageSize = ref(10);
	const hasMore = ref(true);
	const scrollHeight = ref(0);
	const tatal = ref(0);
	const selectedAmount = ref(0);
  const detailPopup = ref(null);
	const packageInfo = ref({
		// 套餐名
		packageName:null,
		// 优惠金额
    discountAmount:null,
		prince:null
	})
	// 生命周期
	onMounted(() => {
		loadData();
		calcScrollHeight();
	});
const loadMore =()=>{
	loadData();
}
	// 计算滚动区域高度
	const calcScrollHeight = () => {
		const systemInfo = uni.getSystemInfoSync();
		scrollHeight.value = systemInfo.windowHeight - 160; // 根据实际布局调整
	};

	// 加载数据
	const loadData = async () => {
		let querypas = {
			current: page.value ,
			size: pageSize.value
		}
    console.log(querypas)
		let  newData = await getlist(querypas);
		tatal.value = newData.total
		console.log(newData.total);
		projectList.value = [...projectList.value,...newData.data.records]
		page.value++;
		setTimeout(() => {

		}, 500);
	};

	// 滑动加载
	// const loadMore = () => {
	// 	if (hasMore.value) {
	// 		loadData();
	// 	}
	// };
const subCreate = async ()=>{
  packageInfo.value.discountAmount = selectedAmount.value-parseInt(packageInfo.value.prince) ;
  let datae = {
    packageInfo:packageInfo.value,
    ids:selectedItems.value
  }
   let res = await add(datae);
   if (res.code == 200){
     selectedItems.value = [];
     redirectRefresh()
   }
}
	// 搜索处理
	const handleSearch = () => {
		// loadData(true);
	};

	// 批量删除
	const handleBatchDelete = async () => {
		// projectList.value = projectList.value.filter(
		// 	item => !selectedItems.value.includes(item.id)
		// );
    let res = await deleteBatch(selectedItems.value);
    // console.log(selectedItems.value)
    if(res.code == 200){
      selectedItems.value = [];
      redirectRefresh()
    }

	};
	// 生成套餐
	const handlecreate = async () => {
  detailPopup.value.open();

	};

	// 选择切换
	const toggleSelect = (id) => {
    selectedAmount.value =0;
    const index = selectedItems.value.indexOf(id);
		if (index > -1) {
			selectedItems.value.splice(index, 1);
		} else {
			selectedItems.value.push(id);
		}
    selectedItems.value.forEach(id=>{
      projectList.value.forEach(item=>{
        if (item.serviceId == id){
          selectedAmount.value = selectedAmount.value + parseInt(item.price);
        }
      })
    })


	};

	// 跳转新增页面
	const navigateToAdd = () => {
		uni.navigateTo({
			url: '/pages/servicev/com/add'
		});
	};

</script>


<style lang="scss" scoped>
.container {
  background: #f5f5f5;
  min-height: 100vh;
}

.search-bar {
  padding: 20rpx 30rpx;
  background: #fff;
  box-shadow: 0 4rpx 12rpx rgba(0,0,0,0.05);

  .search-input-wrapper {
    background: #f5f5f5;
    border-radius: 40rpx;
    padding: 16rpx 30rpx;
    display: flex;
    align-items: center;
    
    .search-icon {
      margin-right: 16rpx;
    }
    
    .search-input {
      flex: 1;
      font-size: 28rpx;
      color: #333;
    }
    
    .placeholder-style {
      color: #999;
    }
  }
}

.action-bar {
  padding: 20rpx 30rpx;
  
  .add-btn {
    background: #007AFF;
    color: #fff;
    border-radius: 40rpx;
    font-size: 28rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 12rpx 0;
    
    &::after {
      border: none;
    }
  }
}

.scroll-view {
  padding: 0 30rpx;
}

.project-item {
  background: #fff;
  border-radius: 12rpx;
  margin-bottom: 20rpx;
  padding: 24rpx;
  display: flex;
  transition: all 0.2s;
  box-shadow: 0 4rpx 12rpx rgba(0,0,0,0.05);
  
  &.selected {
    background: #f0f7ff;
    border: 1rpx solid #007AFF;
  }

  .checkbox-wrapper {
    margin-right: 20rpx;
    
    .custom-checkbox {
      width: 36rpx;
      height: 36rpx;
      border: 2rpx solid #ccc;
      border-radius: 8rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      
      .checkbox-icon {
        background: #007AFF;
        width: 100%;
        height: 100%;
        border-radius: 6rpx;
        display: flex;
        align-items: center;
        justify-content: center;
      }
    }
  }

  .item-content {
    flex: 1;
    
    .title-line {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 16rpx;
      
      .name {
        font-size: 32rpx;
        color: #333;
        font-weight: 500;
      }
      
      .price {
        color: #e64340;
        font-size: 32rpx;
        font-weight: bold;
      }
    }

    .meta-line {
      display: flex;
      align-items: center;
      
      .category-tag {
        background: #f0f7ff;
        color: #007AFF;
        font-size: 24rpx;
        padding: 4rpx 12rpx;
        border-radius: 8rpx;
        margin-right: 16rpx;
      }
      
      .desc {
        color: #999;
        font-size: 26rpx;
		max-width: 200rpx;  /* 最大宽度 */
        flex: 1;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
    }
  }
}

.loading-wrapper {
  padding: 30rpx 0;
  text-align: center;
  
  .loading-content {
    display: flex;
    align-items: center;
    justify-content: center;
    color: #007AFF;
    font-size: 28rpx;
    
    .loading-icon {
      margin-right: 12rpx;
      animation: rotating 1s linear infinite;
    }
  }
  
  .no-more {
    color: #999;
    font-size: 26rpx;
  }
}

.batch-actions {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: #fff;
  padding: 20rpx 30rpx;
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-shadow: 0 -4rpx 12rpx rgba(0,0,0,0.08);
  
  .selected-count {
    color: #666;
    font-size: 28rpx;
  }
  
  .action-buttons {
    display: flex;
    gap: 20rpx;
    
    .btn {
      border-radius: 40rpx;
      font-size: 28rpx;
      padding: 12rpx 36rpx;
      
      &::after {
        border: none;
      }
      
      &.delete-btn {
        background: #e64340;
        color: #fff;
      }
       &.create-btn {
        background: #25c902;
        color: #fff;
      }
    }
  }
}

@keyframes rotating {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}


.detail-modal {
  background: #fff;
  border-radius: 16px;
  width: 85vw;

  .modal-header {
    padding: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #eee;

    .modal-title {
      font-size: 18px;
      font-weight: bold;
    }
  }

  .modal-content {
    max-height: 60vh;
    padding: 20px;

    .detail-name {
      font-size: 16px;
      color: #333;
      margin-bottom: 15px;
      display: block;
    }

    .price-row {
      margin: 10px 0;
      display: flex;
      align-items: center;

      .label {
        color: #666;
        width: 80px;
      }

      .red-text {
        color: #eb5757;
      }

      .del-text {
        text-decoration: line-through;
      }
    }

    .divider {
      height: 1px;
      background: #eee;
      margin: 15px 0;
    }

    .desc {
      color: #666;
      font-size: 14px;
      line-height: 1.6;
    }
  }
}
</style>